<template>
<el-dialog
v-if="isShowDesc"
  title="题目预览"
  :visible="dialogVisible"
  @close='closeDesc'
  width="60%">
    <el-descriptions :column='column'>
    <el-descriptions-item label="【题型】">{{questionType(DescInfo.questionType)}}</el-descriptions-item>
    <el-descriptions-item label="【编号】">{{DescInfo.id}}</el-descriptions-item>
    <el-descriptions-item label="【难度】">{{difficulty(DescInfo.difficulty)}}</el-descriptions-item>
    <el-descriptions-item label="【标签】">
      {{DescInfo.tags}}
    </el-descriptions-item>
    <el-descriptions-item label="【学科】">{{DescInfo.subjectName}}</el-descriptions-item>
    <el-descriptions-item label="【目录】">{{DescInfo.directoryName}}</el-descriptions-item>
    <el-descriptions-item label="【方向】">{{DescInfo.direction}}</el-descriptions-item>
</el-descriptions>
<hr>
<!-- 题目类型 -->
 <el-descriptions :column="column2">
    <el-descriptions-item label="【题干】"><p class="questions1" v-html="DescInfo.question"></p></el-descriptions-item>
    <!-- <el-descriptions-item label="【题干】">{{DescInfo.question}}</el-descriptions-item> -->
    <el-descriptions-item v-if="DescInfo.questionType === '1'" label="单选题 选项">
      (以下选中的选项为正确答案)
      <div v-for="item in DescInfo.options" :key="item.id"><el-radio :value="1" :label="item.isRight">{{item.title}}</el-radio></div>
    </el-descriptions-item>
    <!-- 多选 -->
    <el-descriptions-item v-else-if="DescInfo.questionType === '2'" label="多选题 选项">
      (以下选中的选项为正确答案)
      <div v-for="item in DescInfo.options" :key="item.id"><el-checkbox :value='item.isRight?true:false' :label="item.isRight">{{item.title}}</el-checkbox></div>
    </el-descriptions-item>
    <!-- 简答 -->
    <el-descriptions-item v-else label="简答题">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请开始你的表演"
            v-model="textarea">
        </el-input>
    </el-descriptions-item>
</el-descriptions>
    <hr >
<!-- 视频 -->
<el-descriptions :column="column2">
  <el-descriptions-item label="【参考答案】">
    <el-button v-if="!isShowVideo" @click="isShowVideo=true" type="danger" size="small">视频答案预览</el-button>
    <vueMiniPlayer v-else ref="vueMiniPlayer" :video="video" :mutex="true" />
  </el-descriptions-item>
</el-descriptions>
<hr >
<!-- 答案解析 -->
<el-descriptions :column="column2">
  <el-descriptions-item label="【答案解析】" v-html="DescInfo.answer">
   <!-- {{DescInfo.answer}} -->
   <span class="questions" v-html="DescInfo.answer"></span>
  </el-descriptions-item>
</el-descriptions>
<hr >
<!-- 题目备注 -->
<el-descriptions :column="column2">
  <el-descriptions-item label="题目备注">
    {{DescInfo.remarks}}
  </el-descriptions-item>
</el-descriptions>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="closeDesc">关闭</el-button>
  </span>
</el-dialog>

</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants.js'
export default {
  props: {
    isShowDesc: {
      type: Boolean,
      required: true
    }, // 弹层是否显示
    DescInfo: {
      type: Object,
      required: true
    }// 弹层数据
  },
  data () {
    return {
      textarea: '', // 简答题内容
      dialogVisible: '',
      column: 4, // 一行显示数量
      column2: 1, // 第二个一行显示数量
      isShowVideo: false, // 视频组件是否显示
      // 视频组件数据
      video: {
        url: this.DescInfo.videoURL,
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false
      }
    }
  },
  computed: {
    $video () {
      return this.$refs.vueMiniPlayer.$video
    }
  },
  created () {
  },
  methods: {
    // 关闭弹层
    closeDesc () {
      this.$emit('onClose', false)
      // this.isShowVideo = false
    },
    // 难度处理
    difficulty (diff) {
      return difficulty.find(item => item.value === diff - 0).label
    },
    // 题型处理
    questionType (type) {
      return questionType.find(item => item.value === type - 0).label
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-descriptions-item{
height: 36px;
padding: 10px 0;
}
.questions1{
  color: blue;
}
</style>
